<script setup lang="jsx">
  import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import waybillTray from '@/api/abroad/waybillTray'
import { Message, Modal } from '@arco-design/web-vue'
import dicthelpApi from "@/api/dicthelpApi.js";
import {localColumns,tablePrantRefHeightForm} from "@/utils/crud/culmns.js";
import {getDictData} from "@/utils/crud/dictNew.js";

const columnsDist = inject('columnsDist')
const formSearchRef=ref(null)
const tableRef = ref()
const tablePrantRef = ref() //tabel 父级高度
const dataList = ref([])
const loading=ref(false)
const selected=ref([])
//总页数
const pageInfo = ref({
  currentPage: 1,
  total: 0,
  totalPage:1
})
//table 选择
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});


const columnsData = ref([
  {title: '服务类型', dataIndex: 'send_type',slotName: 'send_type',align:'center',},
  {title: '派送类型', dataIndex: 'service_type_id',slotName: 'service_type_id',align:'center',},
  {title: '目的地', dataIndex: 'address_id',slotName: 'address_id',align:'center', },
  {title: '箱唛', dataIndex: 'shipment.shipment_no',align:'center',},
  {title: 'CTNS', dataIndex: 'count',align:'center',},
  {title: 'Weight', dataIndex: 'shipment.weight',align:'center',},
  {title: 'CBM', dataIndex: 'shipment.volume',align:'center',},
  {title: 'ID', dataIndex: 'shipment.fba_id',align:'center',},
  {title: 'PO', dataIndex: 'shipment.po_number',align:'center',},
  {title: '备注', dataIndex: 'shipment.remark',align:'center',},
])

//列表请求数据
const formSearch=reactive({
  container_no:'',
  unpacking_at:'',
  scence:'task',
  page: 1,
  pageSize: 10,
  })
    //重置
  const resetSearch=(e)=>{
    formSearchRef.value.resetFields();
    console.log('formSearch',formSearch)
    tableList()
  }
 //搜索 
 const submitSearch=(e)=>{
  formSearch.page=1
  formSearch.refresh_tabs=1
  searchHide.value=false
  tableList()
}
  //切换分页
const pageChange=(e)=>{
  if(e){
   formSearch.page=e
    tableList()
  }
}
  //切换条数
const pageSizeChange=(e)=>{
  if(e){
   formSearch.pageSize=e
    tableList()
  }
}
//行数选中
const setSelecteds = (key) => {
  selected.value = key
  console.log('selected.value',key)
}
//列表
const tableList = () => {
  loading.value=true
  waybillTray.waybillTrayList(formSearch).then(res => {  
    console.log('res',res)   
    dataList.value =  res.data.items
    //页数
    pageInfo.value = res.data.pageInfo
    selected.value=[]
    loading.value=false
    tablePrantRefHeightForm(tablePrantRef.value)
  })      
}
const visible = ref(false)
  const open = (value) => {
    visible.value = true
    tableList()
  }


const emits = defineEmits(['addClick','emitClick'])
  //新增 //编辑
  const handleBeforeOk =async (formEl) => {
    let dataListPrant=[]
    if(selected.value.length==0){
      Message.warning('请选择转运单')
      return false
    }
    dataList.value.map((item,index)=>{
      selected.value.map((itemInfo,indexInfo)=>{
        if(itemInfo==item.id){
          item.shipment.parcel_count_estimate=item.count
          item.shipment.idsi=item.id
          item.shipment.o_id=new Date().getTime()+indexInfo
          dataListPrant.push(item.shipment)
        }
        })
      })
      emits('addClick',dataListPrant);
      close()
    };


    const close = () => {
      formSearchRef.value.resetFields();
      visible.value = false
      dataList.value=[]
      selected.value=[]
    }
defineExpose({ open })
</script>

<template>
  <a-drawer v-model:visible="visible" v-if="visible" width="80%" @cancel="close">
        <template #title>选择转运单</template>
        <a-form ref="formSearchRef" :model="formSearch">
          <div class="form-main">
            <div class="form-item">
              <a-form-item field="container_no" label="柜号" label-col-flex="90px" class="searchTop-list" style="width: 35%;">
                <a-input v-model="formSearch.container_no" allow-clear placeholder="输入柜号"/>
                </a-form-item>  
               
               <a-form-item field="unpacking_at" label="ETA/入仓时间" label-col-flex="110px" class="searchTop-list" style="width: 35%;">
                 <a-range-picker
                   showTime
                   v-model="formSearch.unpacking_at"
                   :time-picker-props="{
                   defaultValue:['00:00:00','00:00:00']
                   }"
                 />
               </a-form-item>
            </div>     
            <div class="form-buttom">
              <div>
                <a-button type="primary" html-type="submit" @click="submitSearch" style="margin-right: 10px;">
                  <template #icon>
                    <icon-search/>
                  </template>
                  搜索
                </a-button>
                <a-button @click="resetSearch">
                  <template #icon>
                    <icon-delete/>
                  </template>
                  重置
                </a-button>
              </div>      
          </div>
        </div>

        </a-form>
        <div ref="tablePrantRef">
          <a-table  ref="tableRef" row-key="id" :columns="columnsData" :data="dataList" v-model:selectedKeys="selected" @selection-change="setSelecteds($event)" stripe :row-selection="rowSelection" :bordered="false"  size="mini" column-resizable :pagination="false">
                <!--  列表插槽    -->
                <template #service_type_id="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.shipment.service_type_id,3,columnsDist) }}</template>
                <template #send_type="{ record,rowIndex }">{{getDictData('dictObj','waybill_sea_task_shipment_operate',record.shipment.send_type,2,columnsDist) }}</template>
                <template #address_id="{ record }">{{getDictData('attrApi','dicthelpApi_addressChang',record.shipment.address_id,1,columnsDist) }}</template>
   
      </a-table>
    </div>  

    <!-- 分页 -->
    <div class="foot-list">
      <a-pagination
          :total="pageInfo.total"
          show-total show-jumper show-page-size     
          v-model:current="formSearch.page"
          @change="pageChange"
          @page-size-change="pageSizeChange"
          :page-size-options="[10, 20, 30, 50, 100]"
          :page-size="formSearch.pageSize"
          style="display: inline-flex"
      />
    </div>
        <template #footer> 
          <div style="display: flex; justify-content: space-between;align-items: center;">
            <div style="color: rgb(50 193 148);">
              <!-- tips：先选择"服务项目"后在操作明细,请按要求填写(导入)单据信息 -->
            </div>
            <div>
              <a-button @click="close" style="margin-right: 20px;">关闭</a-button>
              <a-button type="primary" @click="handleBeforeOk(formSearchRef)">
                确定
              </a-button>
            </div>
          </div>       
        </template>
      </a-drawer>

</template>
<style>
   .form-top-main{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
   }
   .tab-main{
    display: flex;
    align-items: center;
    margin: 10px 0;
   }
   .tab-main .arco-form-item{
    margin-bottom: 0;
   }
   .tab-main .arco-switch{
    margin-right: 20px;
   }
</style>